<template>
  <div>
    <text class="title bg-white p-2 border-bottom">{{standard.standardName}}</text>

    <data-web :src="htmlContent"
              :zoom="true"
              style="width:750;flex:1;"></data-web>

  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'

export default {
  components: { VmButton },
  props: {},
  data() {
    return {
      standard: {},
      releaseDate: '',
      htmlContent: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getParams()
  },
  methods: {
    getParams() {
      this.$router.getParams().then(res => {
        this.standard = res || {}
        const date = this.standard.releaseDate
        const releaseDate = date ? date.substr(0, 10) : ''
        const cssLayout = '<!DOCTYPE><html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=\"><style>*{padding: 0;margin: 0;word-wrap:break-word;}#webview_wrapper{margin: 10px 15px 0 15px;}p{color: #333333;line-height: 2em;font-size:32px;opacity: 1;}img {margin-top: 13px;margin-bottom: 15px;max-width: 100%;}</style></head>'
        const subTitle = `<p>发布部门：${this.standard.releaseDepartment}</p><p style="margin-bottom:2em;">发布部门：${releaseDate}</p>`
        this.htmlContent = `${cssLayout}<body><div id="webview_wrapper">${subTitle}${this.standard.content || ''}</div></body></html>`
      })
    },
    show() {
      console.log(helloplugin)
      helloplugin.hello()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.bg-white {
  background-color: #fff;
}
.border-bottom {
  border-bottom-color: $border-color;
  border-bottom-width: 1px;
}
.p-2 {
  padding: 20px;
}
.text-muted {
  color: #999;
}
.small {
  font-size: 26px;
}
.title {
  font-size: 32px;
}
.desc {
  font-size: 28px;
  color: #666;
  margin-bottom: 10px;
}
.remark {
  font-size: 24px;
  color: #999;
}
</style>
